<template>
  <view class="main">
    <view class="desc">
      <view class="title">反馈内容</view>

      <view class="area">
        <textarea v-model="formData.details" class="desc-text" cols="30" rows="10" placeholder="请输入反馈内容"></textarea>
      </view>
      <view class="txt-number">{{ descNumber }}/200</view>
    </view>
    <view class="picture desc">
      <view class="title">上传照片（最多三张）</view>
      <view class="upload">
        <uploadImage @upload="image => formData.image = image" />
      </view>
    </view>
    <view class="tel desc">
      <view class="title">联系电话</view>
      <view class="ipt">
        <input type="number" v-model="formData.tel" maxlength="11" placeholder="选填，我们将更有针对性的及时回访" />
      </view>
    </view>
    <view class="btn-box dispaly-align-center">
      <view class="btn dispaly-align-center" @click="submitData">提交</view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import uploadImage from '@/components/uploadImage/uploadImage.vue';
import { submit } from '@/api/apiList'

const descNumber = ref(0)
const formData = reactive({
  details: '',
  tel: '',
  image: '',
  type: 1
})

watch(
    () => formData.details,
    (val) => {
      descNumber.value = val.length;
    },
    { deep: true, immediate: true }
);

// 提交
const submitData = async () => {
  if (!formData.details.length) {
    await uni.showToast({
      title: '请填写需求描述',
      icon: 'none',
      mask: true
    })
    return
  }
  await uni.showLoading({
    title: '提交中',
  })
  const res = await submit(formData)
  if (res.code == 200) {
    uni.hideLoading()
    await uni.showToast({
      title: '提交成功',
      icon: 'none',
      mask: true
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }
}
</script>

<style lang="scss" scoped>
.main {
  .tel {
    .ipt {
      border-bottom: 2rpx solid #eee;
    }
  }

  .desc {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 30rpx;

    .title {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #000000;
      margin-bottom: 30rpx;
    }

    .area {
      .desc-text {
        padding-left: 10rpx;
      }
    }

    .txt-number {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #aaaaaa;
      text-align: right;
    }
  }

  .btn-box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 116rpx;

    .btn {
      width: 678rpx;
      height: 90rpx;
      background: #FB4E47;
      border-radius: 45rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 34rpx;
      color: #FFFFFF;
    }
  }
}
</style>
